<template>
    <div>
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                    <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
                    <el-form-item label="姓名">
                    <el-input v-model="sizeForm.fileName" style="margin-left: 80px; width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮件">
                    <el-input v-model="sizeForm.email" style="margin-left: 80px; width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="政治面貌">
                    <el-select v-model="value2" placeholder="请选择" style="margin-left: 80px; width: 90%">
                        <el-option v-for="item in politicsStatus" :key="item.value2" :label="item.label" :value="item.value2">
                        </el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                    <el-select v-model="value3" placeholder="请选择" style="margin-left: 80px; width: 90%">
                        <el-option v-for="item in status" :key="item.value3" :label="item.label" :value="item.value3">
                        </el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="部门">
                    <el-select v-model="value4" placeholder="请选择" style="margin-left: 80px; width: 90%">
                        <el-option v-for="item in department" :key="item.value4" :label="item.label" :value="item.value4">
                        </el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="岗位">
                    <el-input v-model="sizeForm.station" style="margin-left: 80px; width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="入职时间">
                    <el-date-picker v-model="sizeForm.entryTime" type="date" placeholder="选择日期" style="margin-left: 80px; width: 90%">
                    </el-date-picker>
                    </el-form-item>
                    <el-form-item label="手机号">
                    <el-input v-model="sizeForm.phone" style="margin-left: 80px; width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="合同截止">
                    <el-date-picker v-model="sizeForm.cancellingDate" type="date" placeholder="选择日期" style="margin-left: 80px; width: 90%">
                    </el-date-picker>
                    </el-form-item>
                    <el-form-item label="劳动合同（已签署）">
                    <el-upload class="laborContractRenewal" 
                        :auto-upload="false"
                        :on-change="handleChange" :file-list="fileList">
                        <el-button size="small" type="plain" style="margin-left: 80px">附件上传</el-button>
                    </el-upload>
                    </el-form-item>

                        <el-form-item size="large">
                            <el-button type="primary" @click="onSubmit" style="margin-left: -60px;
                            margin-top: 20px;">确认</el-button>
                            <el-button @click="onCancel">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>

import { updatePersonnel } from '../../api/personnel';
import moment from 'moment';
import {upload} from '../../utils/upload'

export default {
    data() {
        return {
            input: '',
            activeName: 'first',
            personnelInfo: '',
            sizeForm: {
                customerId:"",
                fileName: "",
                status: "",
                department: "",
                entryTime: "",
                phone: "",
                email: "",
                photograph: "",
                station: "",
                cancellingDate: "",
                laborContractRenewal: "",
                politicsStatus: "",
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            politicsStatus: [
        {
          value2: "选项1",
          label: "群众",
        },
        {
          value2: "选项2",
          label: "团员",
        },
        {
          value2: "选项3",
          label: "党员",
        },
        {
          value2: "选项4",
          label: "其他",
        },
      ],
      value2: "",
      status: [
        {
          value3: "选项1",
          label: "在职",
        },
        {
          value3: "选项2",
          label: "离职",
        },
        {
          value3: "选项3",
          label: "外包",
        },
        {
          value3: "选项3",
          label: "外聘",
        },
      ],
      value3: "",
      department: [
        {
          value4: "选项1",
          label: "销售部",
        },
        {
          value4: "选项2",
          label: "财务部",
        },
        {
          value4: "选项3",
          label: "研发部",
        },
        {
          value4: "选项4",
          label: "人事部",
        },
        {
          value4: "选项5",
          label: "采购部",
        },
      ],
      value4: "",
 };

    },
    methods: {
        handleChange(file, fileList) {
            this.fileList = fileList.slice(-3);
            upload(file.raw)
        },
        onSubmit() {
            this.$router.push('/personnel/personnel')
        },
        onCancel() {
            this.$router.push('/personnel/personnel')
        },

    onSubmit() {
        let data = {
          customerId:this.sizeForm.customerId,
          fileName: this.sizeForm.fileName,
          status: this.value3,
          department: this.value4,
          entryTime: moment(this.sizeForm.entryTime).format('YYYY-MM-DD'),
          phone: this.sizeForm.phone,
          email: this.sizeForm.email,
          photograph: this.photograph,
          station: this.sizeForm.station,
          cancellingDate: moment(this.sizeForm.cancellingDate).format('YYYY-MM-DD'),
          laborContractRenewal: this.laborContractRenewal,
          politicsStatus: this.value2,
        };
        console.log(data);
        updatePersonnel(data).then(response => {
          console.log(response)
          if (response.code === 200) {
            this.$message.success('修改成功');
            // localStorage.clear();
            this.$router.push('/personnel/personnel');
        } else {

            this.$message.error('修改失败');
        }
        })
    },
    localeData() {
        let a = JSON.parse(localStorage.getItem('personnel'))
        console.log(a.fileName)
        this.sizeForm.customerId = a.customerId
        this.sizeForm.fileName = a.fileName
        this.value3 = a.status
        this.value4 = a.department
        this.sizeForm.entryTime = a.entryTime
        this.sizeForm.phone = a.phone
        this.sizeForm.email = a.email
        this.photograph = a.photograph
        this.sizeForm.station = a.station
        this.sizeForm.cancellingDate = a.cancellingDate
        this.laborContractRenewal = a.laborContractRenewal
        this.value2 = a.politicsStatus

      }
    },
    mounted(){
        this.localeData()
    }
    
}
</script>

<style></style>